import { useState } from 'react';
import { YmReactDnd } from 'ym-design';
import Container from './Container';
const { HTML5DndProvider } = YmReactDnd;

function DragAndMovePos() {
  const [hideSourceOnDrag, setHideSourceOnDrag] = useState(true);
  return (
    <div>
      <HTML5DndProvider>
        <Container hideSourceOnDrag={hideSourceOnDrag} />
      </HTML5DndProvider>
      <p>
        <label htmlFor="hideSourceOnDrag">
          <input
            id="hideSourceOnDrag"
            type="checkbox"
            role="checkbox"
            checked={hideSourceOnDrag}
            onChange={() => {
              setHideSourceOnDrag(!hideSourceOnDrag);
            }}
          />
          <small>Hide the source item while dragging</small>
        </label>
      </p>
    </div>
  );
}

export default DragAndMovePos;
